<template>
  <el-menu
    class="el-menu-vertical-demo"
    @close="handleClose"
    background-color="#1c1c1e"
    :unique-opened="true"
    :router="false"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <el-submenu index="1">
      <template slot="title">
        <span>基础管理</span>
      </template>
      <el-menu-item-group>
        <!-- index对应router.js中的path -->
        <el-menu-item index="/basic/cardBag" @click="handleOpen({title:'卡包管理', name: 'cardBag'})">卡包管理</el-menu-item>
        <el-menu-item index="/basic/cardVoucher" @click="handleOpen({title:'卡券管理', name: 'cardVoucher'})">卡券管理</el-menu-item>
        <el-menu-item index="/basic/goods" @click="handleOpen({title:'商品管理', name: 'goods'})">商品管理</el-menu-item>
        <el-menu-item index="/basic/goodsClassify" @click="handleOpen({title:'商品分类管理', name: 'goodsClassify'})">商品分类管理</el-menu-item>
        <el-menu-item index="/basic/themeList" @click="handleOpen({title:'主题管理', name: 'themeList'})">主题管理</el-menu-item>
        <el-menu-item index="/basic/carousel" @click="handleOpen({title:'轮播图', name: 'carousel'})">轮播图</el-menu-item>
        <el-menu-item index="/basic/deliver" @click="handleOpen({title:'快递管理', name: 'deliver'})">快递管理</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="2">
      <template slot="title">
        <span>运维管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/operations/exchange" @click="handleOpen({title:'兑换列表', name: 'exchange'})">兑换列表</el-menu-item>
        <el-menu-item index="/operations/orders" @click="handleOpen({title:'订单列表', name: 'orders'})">订单列表</el-menu-item>
        <el-menu-item index="/operations/BigUserInfo" @click="handleOpen({title:'大件发货', name: 'BigUserInfo'})">大件发货</el-menu-item>
        <el-menu-item index="/operations/complaint" @click="handleOpen({title:'物流投诉', name: 'complaint'})">物流投诉</el-menu-item>
        <el-menu-item index="/operations/invoiceLog" @click="handleOpen({title:'开票管理', name: 'invoiceLog'})">开票管理</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="3">
      <template slot="title">
        <span>会员管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/member/memberList" @click="handleOpen({title:'会员列表', name: 'memberList'})">会员列表</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="4">
      <template slot="title">
        <span>系统管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/system/deliverSet" @click="handleOpen({title:'自动发货设置', name: 'deliverSet'})">自动发货设置</el-menu-item>
        <el-menu-item index="/system/account" @click="handleOpen({title:'账户管理', name: 'account'})">账户管理</el-menu-item>
        <el-menu-item index="/system/distributor" @click="handleOpen({title:'经销商管理', name: 'distributor'})">经销商管理</el-menu-item>

      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>
<script>
export default {
  data() {
    return {};
  },
  created() {},
  methods: {
    handleOpen(data) {
      this.$emit('openMenu',data)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style lang="scss" scoped>
.el-menu-vertical-demo {
  width: 201px;
}
</style>
